<template>
  <view style="width: 100%">
    <view class="u-page">
      <u-toast ref="uToast"></u-toast>

      <u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
      <u-row customStyle="margin: 10px">
        <u-col span="8"> </u-col>
        <u-col span="4">
          <u-button
            type="primary"
            style="text-align: right"
            icon="reload"
            shape="circle"
            @click="handel_testLink_click"
            text="测试连接"
          ></u-button>
        </u-col>
      </u-row>
      <u-row customStyle="margin-bottom: 10px">
        <u-col span="12">
          <u-search
            style="z-index: 999"
            :disabled="true"
            bgColor="rgb(255 255 255)"
            placeholder="搜索"
            shape="round"
            @click="handle_SearchBox_click"
            :showAction="false"
            :animation="true"
          ></u-search>
        </u-col>
      </u-row>
      <u-popup :show="show" @close="close" @open="open">
        <view style="width: 93%; align-self: center">
          <u--form
            labelWidth="auto"
            labelPosition="left"
            :model="queryParamsForm"
            :rules="rules"
            ref="form1"
          >
            <u-form-item
              label="申请人姓名"
              prop="name"
              borderBottom
              ref="item1"
            >
              <u--input
                inputAlign="center"
                shape="square"
                border="none"
                v-model="queryParamsForm.name"
              >
              </u--input>
            </u-form-item>
            <u-form-item
              label="申请人身份证号码"
              prop="idNumber"
              borderBottom
              ref="item1"
            >
              <u--input
                inputAlign="center"
                shape="square"
                border="none"
                v-model="queryParamsForm.idNumber"
              >
              </u--input>
            </u-form-item>
            <!-- 	<u-form-item label="性别" prop="sex" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.sex">
							</u--input>
						</u-form-item> -->
          </u--form>
          <u-row customStyle="margin:10px">
            <u-col span="12">
              <u-button
                class="custom-style"
                type="primary"
                size="small"
                @click="handel_search_click"
                >搜索
              </u-button>
            </u-col>
          </u-row>
          <u-row customStyle="margin:10px">
            <u-col span="12">
              <u-button
                class="custom-style"
                type="primary"
                size="small"
                @click="handel_reset_click"
                >重置
              </u-button>
            </u-col>
          </u-row>
        </view>
      </u-popup>
      <u-row customStyle="margin-bottom: 10px ">
        <u-col span="12">
          <!-- 					<vue-loadmore :on-loadmore="MyonLoad" :finished="finished">
						<u-empty v-if="DataList.length==0" mode="list"></u-empty>
						<u-cell-group customStyle='background-color: white;' v-else>
							<u-cell v-for="(item, index) in DataList" size="large" isLink clickable
								:title="getItemTitle(item)" :label="getItemLabel(item)" :name=item.id
								@click="handel_cell_click">
							</u-cell>
						</u-cell-group>
					</vue-loadmore> -->

          <u-empty v-if="DataList.length == 0" mode="list"></u-empty>
          <u-cell-group customStyle="background-color: white;" v-else>
            <u-cell
              v-for="(item, index) in DataList"
              size="large"
              isLink
              clickable
              value="设备详情"
              :name="item.id"
              @click="handel_cell_click"
            >
              <view slot="title" class="u-slot-title">
                <text class="u-cell-text">{{ item.itemName }}</text>
                <u-tag
                  v-if="connetStatus.some(item.id)"
                  text="已连接"
                  plain
                  size="mini"
                  type="success"
                >
                </u-tag>
                <u-tag
                  v-else-if="!connetStatus.some(item.id)"
                  text="未连接"
                  color="#C6C7CB"
                  borderColor="#C6C7CB"
                  plain
                  size="mini"
                >
                </u-tag>
              </view>
            </u-cell>
          </u-cell-group>
          <uni-load-more
            :status="status"
            :contentText="loadText"
            @clickLoadMore="MyonLoad"
          />
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
//适老化改造对象,该页负责：
//1.获取老人信息列表，下拉继续加载
//2.提供条件搜索选项
//3.点击单个老人信息跳转到老人详情
//4.新增录入老人信息
import {
  transformPostBody,
  transformRequestURL,
} from "@/utils/requestParams.js";

import {
  listSlhgzdxdr,
  getSlhgzdxdr,
  delSlhgzdxdr,
  addSlhgzdxdr,
  updateSlhgzdxdr,
} from "@/api/elder/serviceApply.js";

import {
  QueryDeviceInstallList,
  addDeviceInstall,
  updateDeviceInstall,
  getDeviceInstall,
  delDeviceInstall,
  QueryDeviceInstallHistory,
} from "@/api/elder/DeviceInstall";

import {
  listGzxmmx,
  getGzxmmx,
  delGzxmmx,
  addGzxmmx,
  updateGzxmmx,
} from "@/api/elder/serviceApply.js";

import { GetDistance } from "@/utils/map.js";

export default {
  name: "index",
  components: {},
  data() {
    return {
      DataList: [],
      total: 0, //条目总数，用户加载更多
      id: null,
      connetStatus: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        packageName: null,
        itemName: null,
        beforeTaskImg: null,
        afterTaskImg: null,
        taskDetail: null,
        status: null,
        taskStarttime: null,
        taskEndtime: null,
        checkStarttime: null,
        checkEndtime: null,
        checkDetails: null,
        checkName: null,
        checkImg: null,
        remark: null,
        deviceType: null,
        deviceId: null,
        applyNo: null,
      },

      queryParamsForm: {
        id: undefined,
        name: undefined,
        sex: undefined,
        currentState: undefined,
        selfCareAbility: undefined,
        urbanRural: undefined,
        capabilityAssess: undefined,
        livingStatus: undefined,
        pensionMode: undefined,
        childStatus: undefined,

        //areaCode: undefined,
        //permanentResidence: undefined,
        //phone: undefined,
        //socialSecurityNumber: undefined,
        //personLevel: undefined,
        //age: undefined,
        //birthday: undefined,
      },
      rules: {},
      loading: false, //加载中提示框显示
      show: false, //搜索框显示
      finished: false, //加载更多完结
      status: "more", // 显示底部提示
      loadText: {
        contentdown: "点击加载更多",
        contentrefresh: "正在加载",
        contentnomore: "没有更多数据了",
      },

      locationRef: null, // 用于接收定位对象
      location: null,
      targetDistance: 1000, //限制定位与用户登记位置的最大误差距离（米）

      applyInfo: {}, //申请人的信息，主要为了保存申请地址
      signStatu: "", //签到状态，成功，失败
    };
  },
  watch: {},
  computed: {
    getItemLabel() {
      return function (item) {
        let result = "";
        if (item.status) result += item.status + ":";
        if (item.taskStarttime) result += item.taskStarttime;
        if (item.taskEndtime) result += "-" + item.taskEndtime;
        return result;
      };
    },
    GetLocation() {
      if (this.location) return "位置:" + this.location;
      else return "位置:" + "请点击签到获取";
    },
  },
  onLoad: function (options) {
    this.queryParams.applyNo = options.id; //将老人id保存

    //获取申请人信息
    //this.applyInfo=
  },
  onShow() {
    //挂载后默认进行第一页的查询，此时没有设置条件
    this.queryParams.pageNum = 1;
    this.getList();
    this.getDeviceStatus();
  },
  methods: {
    //条件搜索框
    handle_SearchBox_click() {
      this.show = true;
    },
    open() {},
    close() {
      this.show = false;
    },
    // MyonLoad(done) {
    // 	console.log('MyonLoad', this.DataList.length, this.total)
    // 	if (this.DataList.length < this.total) {
    // 		this.fetch();
    // 	} else {
    // 		// all data loaded
    // 		this.finished = true;
    // 	}
    // 	done();
    // },

    MyonLoad(e) {
      this.status = "loading";
      console.log("MyonLoad", this.DataList.length, this.total);
      if (this.DataList.length < this.total) {
        this.fetch();
        this.status = "more";
      } else {
        // all data loaded
        this.finished = true;
        this.status = "nomore";
      }
      e.detail = {
        status: "loading",
      };
      return e;
    },

    //条件搜索按钮点击
    handel_search_click() {
      this.finished = false; //重置搜索完结
      this.queryParams.pageNum = 1; //重置搜索页
      this.DataList = []; //清空原结果集
      this.getList();
      this.show = false; //关闭搜索框
    },

    //条件重置按钮点击
    handel_reset_click() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15, //每次加载更多数据量
        startAge: undefined,
        endAge: undefined,
        areaCode: undefined,
      };
      this.queryParamsForm = {
        idNumber: undefined,
        name: undefined,
        sex: undefined,
        currentState: undefined,
        selfCareAbility: undefined,
        urbanRural: undefined,
        capabilityAssess: undefined,
        livingStatus: undefined,
        pensionMode: undefined,
        childStatus: undefined,
        //areaCode: undefined,
        //permanentResidence: undefined,
        //phone: undefined,
        //socialSecurityNumber: undefined,
        //personLevel: undefined,
        //age: undefined,
        //birthday: undefined,
      };
      this.handel_search_click();
    },

    // //跳转新增页
    // handel_plus_click() {
    // 	this.$tab.navigateTo('/pages/RTInfo/add')
    // },

    //获取设备连接状态
    getDeviceStatus() {
      this.DataList = this.DataList.map((item) => {
        item.connetStatus = 1;

        // QueryDeviceInstallHistory(item.id).then((response) => {
        // //item.connetStatus = 1
        //    // if (response.rows.length > 0) {
        //    //   item.connetStatus = 1
        //    // }
        //    // else if (response.rows.length == 0) {
        //    //   item.connetStatus = -1
        //    // }
        //    // else {
        //    //   item.connetStatus = 0
        //    // }
        // if (response.rows.length > 0) {
        //   this.connetStatus.push(item.id)
        // }
        //  })
      });
    },
    //刷新设备连接状态
    handel_testLink_click() {
      this.getDeviceStatus();
    },

    //跳转详情页
    handel_cell_click(id) {
      this.$tab.navigateTo("/pages/queryDevice/rtDevice_detail?id=" + id.name);
    },

    //加载更多合并结果
    fetch() {
      this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
      listGzxmmx(this.queryParams).then((response) => {
        console.log("response concat", response);
        this.DataList = this.DataList.concat(response.rows);
        this.total = response.total;
      });
    },

    //获取老人信息列表
    getList() {
      console.log("getList");
      this.loading = true;
      listGzxmmx(this.queryParams).then((response) => {
        this.loading = false;
        console.log("response listGzxmmx", response);
        this.DataList = response.rows;
        this.total = response.total;
      });
    },

    //获取老人简介
    getItemTitle(item) {
      let result = "";
      //  "name": "薛荣珍",
      //     "sex": "女",
      //     "age": "87",
      if (item.name) result += item.name + " ";
      if (item.sex) result += item.sex + " ";
      if (item.age) result += item.age + "岁";
      return result;
    },
  },
};
</script>

<style scoped>
.u-slot-title {
  display: flex;
  align-items: center; /* 垂直居中 */
}
.u-cell-text {
  margin-right: 10px; /* 可根据需要调整元素间的间距 */
}

.slot-content {
  width: 90%;
  /* 自定义宽度 */
  margin: 0 auto;
  /* 水平居中 */
}

.demo-uni-row {
  margin-bottom: 10px;
  /* QQ、字节小程序文档写有 :host，但实测不生效 */
  /* 百度小程序没有 :host，需要设置block */
  /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
  display: block;
  /* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
  margin-bottom: 10px;
}

/* #endif */

.demo-uni-col {
  height: 36px;
  border-radius: 4px;
}

.mypage-title {
  font-size: 20px;
  font-weight: 600;
  align-self: center;
}

.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

.custom-style {
  width: 90%;
  font-weight: bolder;
  font-size: 15px;
}
</style>
